<template>
  <my-navigation-bar>儿童坐姿顾问</my-navigation-bar>
  <view v-if="flag">
    <view class="index-box" :style="flag?{top: '180rpx'}:''">
      <view class="main-box">
        <view class="item boy" @tap="goControl">
          <view class="img-box">
            <image src="../../static/image/index/boy.png" mode=""></image>
          </view>
          <text>坐姿检测</text>
        </view>
        <view class="item tired" @tap="goControl">
          <view class="img-box">
            <image src="../../static/image/index/tired.png" mode=""></image>
          </view>
          <text>疲劳检测</text>
        </view>
        <view class="item face" @tap="goControl">
          <view class="img-box">
            <image src="../../static/image/index/face.png" mode=""></image>
          </view>
          <text>人脸检测</text>
        </view>
        <view class="info">
          <text>年龄：10岁</text>
          <text>身高：140cm</text>
          <text>体重：42kg</text>
          <text class="icon-shuxie" @tap="goEdit"></text>
        </view>
      </view>
      <view class="content-box">
        <view class="title">
          日常体态问题
        </view>
        <scroll-view scroll-y="true" class="item-container">
          <view class="itme-box" @tap="goPostureDetail(0)">
            <view class="left">
              <view class="img-box">
                <image src="../../static/image/index/01.jpg" mode=""></image>
              </view>
            </view>
            <view class="right">
              <text class="h">颈椎侧屈</text>
              <text class="c">从背面观察，测评人头颈向一侧倾斜，与脊柱不在一条垂直中立位。</text>
            </view>
          </view>
          <view class="itme-box" @tap="goPostureDetail(1)">
            <view class="left">
              <view class="img-box">
                <image src="../../static/image/index/02.jpg" mode=""></image>
              </view>
            </view>
            <view class="right">
              <text class="h">头前倾</text>
              <text class="c">在孩子自然站立的状态下，从侧面观察孩子的耳垂、颈、肩部不在一条垂直线。</text>
            </view>
          </view>
          <view class="itme-box" @tap="goPostureDetail(2)">
            <view class="left">
              <view class="img-box">
                <image src="../../static/image/index/03.jpg" mode=""></image>
              </view>
            </view>
            <view class="right">
              <text class="h">头旋转</text>
              <text class="c">以一侧胸锁乳突肌和另一侧头夹肌,痉挛为主的测评人的头转向一侧的痉挛性斜颈。从正背面看，可观就发哦年糕年糕</text>
            </view>
          </view>
          <view class="itme-box" @tap="goPostureDetail(3)">
            <view class="left">
              <view class="img-box">
                <image src="../../static/image/index/04.jpg" mode=""></image>
              </view>
            </view>
            <view class="right">
              <text class="h">圆肩驼背</text>
              <text class="c">也称上交叉综合症，在孩子自然站立的状态下，从侧面观察孩子的肩背部，即肩膀前扣，后肩和上背和就覅金佛案件佛啊·</text>
            </view>
          </view>
          <view class="itme-box" @tap="goPostureDetail(4)">
            <view class="left">
              <view class="img-box">
                <image src="../../static/image/index/05.jpg" mode=""></image>
              </view>
            </view>
            <view class="right">
              <text class="h">高低肩</text>
              <text class="c">在孩子自然站立的状态下,从正面,和后面观察孩子的双肩不在同一水平线。</text>
            </view>
          </view>
          <view class="itme-box" @tap="goPostureDetail(5)">
            <view class="left">
              <view class="img-box">
                <image src="../../static/image/index/06.jpg" mode=""></image>
              </view>
            </view>
            <view class="right">
              <text class="h">翼状肩</text>
              <text class="c">正常的肩胛骨是紧贴胸壁的。而外观上非常明显的肩胛骨下角翘起,则是翼状肩。</text>
            </view>
          </view>
          <view class="itme-box" @tap="goPostureDetail(6)">
            <view class="left">
              <view class="img-box">
                <image src="../../static/image/index/07.jpg" mode=""></image>
              </view>
            </view>
            <view class="right">
              <text class="h">脊柱侧弯</text>
              <text class="c">脊柱侧弯需要专业人士测评，但有些青少年由于脊柱侧弯引发了高低。</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
  <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
   <scroll-view scroll-y="true" class="scroll-box">
     <view class="index-box" :style="flag?{top: '180rpx'}:''">
       <view class="main-box">
         <view class="item boy" @tap="goControl">
           <view class="img-box">
             <image src="../../static/image/index/boy.png" mode=""></image>
           </view>
           <text>坐姿检测</text>
         </view>
         <view class="item tired" @tap="goControl">
           <view class="img-box">
             <image src="../../static/image/index/tired.png" mode=""></image>
           </view>
           <text>疲劳检测</text>
         </view>
         <view class="item face" @tap="goControl">
           <view class="img-box">
             <image src="../../static/image/index/face.png" mode=""></image>
           </view>
           <text>人脸检测</text>
         </view>
         <view class="info">
           <text>年龄：10岁</text>
           <text>身高：140cm</text>
           <text>体重：42kg</text>
           <text class="icon-shuxie" @tap="goEdit"></text>
         </view>
       </view>
       <view class="content-box">
         <view class="title">
           日常体态问题
         </view>
         <scroll-view scroll-y="true" class="item-container">
           <view class="itme-box" @tap="goPostureDetail(0)">
             <view class="left">
               <view class="img-box">
                 <image src="../../static/image/index/01.jpg" mode=""></image>
               </view>
             </view>
             <view class="right">
               <text class="h">颈椎侧屈</text>
               <text class="c">从背面观察，测评人头颈向一侧倾斜，与脊柱不在一条垂直中立位。</text>
             </view>
           </view>
           <view class="itme-box" @tap="goPostureDetail(1)">
             <view class="left">
               <view class="img-box">
                 <image src="../../static/image/index/02.jpg" mode=""></image>
               </view>
             </view>
             <view class="right">
               <text class="h">头前倾</text>
               <text class="c">在孩子自然站立的状态下，从侧面观察孩子的耳垂、颈、肩部不在一条垂直线。</text>
             </view>
           </view>
           <view class="itme-box" @tap="goPostureDetail(2)">
             <view class="left">
               <view class="img-box">
                 <image src="../../static/image/index/03.jpg" mode=""></image>
               </view>
             </view>
             <view class="right">
               <text class="h">头旋转</text>
               <text class="c">以一侧胸锁乳突肌和另一侧头夹肌,痉挛为主的测评人的头转向一侧的痉挛性斜颈。从正背面看，可观就发哦年糕年糕</text>
             </view>
           </view>
           <view class="itme-box" @tap="goPostureDetail(3)">
             <view class="left">
               <view class="img-box">
                 <image src="../../static/image/index/04.jpg" mode=""></image>
               </view>
             </view>
             <view class="right">
               <text class="h">圆肩驼背</text>
               <text class="c">也称上交叉综合症，在孩子自然站立的状态下，从侧面观察孩子的肩背部，即肩膀前扣，后肩和上背和就覅金佛案件佛啊·</text>
             </view>
           </view>
           <view class="itme-box" @tap="goPostureDetail(4)">
             <view class="left">
               <view class="img-box">
                 <image src="../../static/image/index/05.jpg" mode=""></image>
               </view>
             </view>
             <view class="right">
               <text class="h">高低肩</text>
               <text class="c">在孩子自然站立的状态下,从正面,和后面观察孩子的双肩不在同一水平线。</text>
             </view>
           </view>
           <view class="itme-box" @tap="goPostureDetail(5)">
             <view class="left">
               <view class="img-box">
                 <image src="../../static/image/index/06.jpg" mode=""></image>
               </view>
             </view>
             <view class="right">
               <text class="h">翼状肩</text>
               <text class="c">正常的肩胛骨是紧贴胸壁的。而外观上非常明显的肩胛骨下角翘起,则是翼状肩。</text>
             </view>
           </view>
           <view class="itme-box" @tap="goPostureDetail(6)">
             <view class="left">
               <view class="img-box">
                 <image src="../../static/image/index/07.jpg" mode=""></image>
               </view>
             </view>
             <view class="right">
               <text class="h">脊柱侧弯</text>
               <text class="c">脊柱侧弯需要专业人士测评，但有些青少年由于脊柱侧弯引发了高低。</text>
             </view>
           </view>
         </scroll-view>
       </view>
     </view>
   </scroll-view>
  </view>
</template>

<script setup>
  import myNavigationBar from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {
    computed,
    ref,
    onMounted,
    reactive
  } from "vue";
  import useBounceFunc from "../../hooks/bounce.js";
  const {state, moveH, startH, endH} = useBounceFunc();

  const flag = computed(() => {
    return getApp().globalData.isIphoneX;
  })



  const goPostureDetail = (id) => {
    uni.navigateTo({
      url: `/subPkgIndex/postureDetail/postureDetail?id=${id}`
    })
  }
  const goEdit = () => {
    uni.navigateTo({
      url: "/subPkgPerson/edit/edit"
    })
  }
  const goControl = () => {
    uni.navigateTo({
      url: "/subPkgIndex/control/control"
    })
  }
</script>


<style lang="scss">
  @import "../../static/image/index/main.scss";

  @mixin right-arrow($x) {
    &::before {
      position: absolute;
      font-family: 'iconfont';
      content: '\e60c';
      display: block;
      width: 35rpx;
      height: 35rpx;
      right: $x;
      bottom: 0;
      background-color: #F7F7F7;
      color: #878787;
      font-size: 24rpx;
      border-radius: 50%;
      text-align: center;
      line-height: 35rpx;
    }
  }

  @mixin ellipse($num: 3) {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $num;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

.scroll-box{
  height: 100vh;
}
  .index-box {
    position: relative;
    top: 150rpx;

    .main-box {
      position: relative;
      box-sizing: border-box;
      padding: 10rpx 40rpx;
      background-color: #F3F3F3;
      background-image: $main-img;
      width: 100%;
      height: 790rpx;
      background-size: cover;

      .item {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        width: 180rpx;

        .img-box {
          width: 180rpx;
          height: 180rpx;
          background-color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          border: 1px solid #999;
          border-radius: 50%;

          image {
            width: 90%;
            height: 90%;
          }
        }

        text {
          font-size: 33rpx;
          font-weight: 550;
        }
      }

      .info {
        position: absolute;
        bottom: 120rpx;
        right: 100rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-weight: 550;

        .icon-shuxie {
          position: absolute;
          bottom: -65rpx;
          right: -15rpx;
          font-size: 53rpx;
        }
      }

      .tired {
        position: absolute;
        bottom: 200rpx;
        left: 75rpx;

        .img-box {
          image {
            width: 80%;
            height: 80%;
          }
        }
      }

      .face {
        position: absolute;
        top: 250rpx;
        right: 80rpx;
      }

      .boy {
        position: absolute;
        top: 60rpx;
        left: 75rpx;
      }
    }

    .content-box {
      padding-bottom: 42rpx;
       
      .title {
        padding: 30rpx 0 15rpx 50rpx;
        font-size: 40rpx;
        font-weight: 550;
      }

      .item-container{
        height: 550rpx;
        .itme-box {
          display: flex;
          justify-content: flex-start;
          padding: 35rpx 50rpx 0 50rpx;
        
          &:active {
            background-color: #eee;
          }
        
          .left {
            .img-box {
              width: 160rpx;
              height: 160rpx;
              border-radius: 20rpx;
        
              image {
                width: 100%;
                height: 100%;
              }
            }
          }
        
          .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: 30rpx;
        
            .h {
              font-size: 35rpx;
              font-weight: 600;
            }
        
            .c {
              font-size: 30rpx;
              color: #666;
              line-height: 39rpx;
              display: block;
              width: 460rpx;
              @include ellipse()
            }
          }
        }
      }
    }

  }
</style>
